<template>
  <div class="p-4 mx-auto max-w-xl">
    <h2 class="mb-4 text-xl font-bold">UUID 生成器</h2>
    <div class="p-4 mb-4 break-all rounded-lg border">
      {{ uuid }}
    </div>
    <div class="flex gap-2 mb-2">
      <button @click="generateUuid" class="px-4 py-2 text-white bg-blue-500 rounded">生成 UUID</button>
      <button @click="generateBatch" class="px-4 py-2 text-white bg-green-500 rounded">批量生成 (10个)</button>
      <button @click="copyToClipboard" class="px-4 py-2 text-white bg-purple-500 rounded">复制到剪贴板</button>
    </div>
    <div v-if="batchUuids.length > 0" class="mt-4">
      <h3 class="mb-2 font-bold">批量生成的UUID:</h3>
      <div class="p-3 rounded-lg border">
        <div v-for="(id, index) in batchUuids" :key="index" class="mb-1 text-sm break-all">
          {{ id }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const uuid = ref('')
const batchUuids = ref([])

// 生成UUID v4
function generateUuid() {
  uuid.value = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    const r = Math.random() * 16 | 0
    const v = c === 'x' ? r : (r & 0x3 | 0x8)
    return v.toString(16)
  })
  batchUuids.value = []
}

// 批量生成UUID
function generateBatch() {
  batchUuids.value = []
  for (let i = 0; i < 10; i++) {
    const id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      const r = Math.random() * 16 | 0
      const v = c === 'x' ? r : (r & 0x3 | 0x8)
      return v.toString(16)
    })
    batchUuids.value.push(id)
  }
}

// 复制到剪贴板
function copyToClipboard() {
  if (!uuid.value) {
    generateUuid()
  }
  navigator.clipboard.writeText(uuid.value)
    .then(() => {
      alert('已复制到剪贴板')
    })
    .catch(err => {
      console.error('复制失败:', err)
      alert('复制失败，请手动复制')
    })
}

// 初始化时生成一个UUID
generateUuid()
</script> 